<!-- ExamComponent.vue -->
<template>
  <div class="p-30px">
    <!-- 模式标识 -->

    <!-- 题目区域 -->
     <div class="flex justify-between "  v-if="isCompleted"> <!--加载题目完成后再显示-->
      <div class="w-550px border border-red-100 rounded-5px">
        <div class="p-30px">
          <div class="p-20px">
            <div class="text-16px" v-if="currentTopic.exam_type === 1">单项选择题（每道题1分）</div>
            <div class="text-16px" v-if="currentTopic.exam_type === 2">多项选择题（每道题2分）</div>
            <div class="text-16px" v-if="currentTopic.exam_type === 5">问答题</div>
          </div>
          
          <div class="flex">
            <div class="w-30px text-center bg-red-300 rounded-full text-white leading-30px h-30px ">{{ currentIndex + 1 }}</div>
            <div class="w-460px ml-10px" v-html="currentTopic.exam_title"></div>
          </div>
          <div class="m-30px" v-if="currentTopic.exam_type == 1 || currentTopic.exam_type == 2">
            <block v-for="(option, index) in currentTopic.exam_option" :key="index">
              <div class="flex mt-20px linkText p-10px rounded-5px" @click="selectOption(index)" v-if="currentTopic.showAnalysis || hasDone" :class="judgeSelect(option)">
                <div class="w-30px text-center h-30px border leading-30px rounded-full " :class="option.isSelected ? 'bg-red-300 text-white' : 'text-gray-500'">{{ option.lable }}</div>
                <div class="w-400px ml-10px mt-2px" v-html="option.value"></div>
              </div>
              <div class="flex mt-20px linkText p-10px rounded-5px" @click="selectOption(index)" v-else>
                <div class="w-30px text-center h-30px border leading-30px rounded-full " :class="option.isSelected ? 'bg-red-300 text-white' : 'text-gray-500'">{{ option.lable }}</div>
                <div class="w-400px ml-10px mt-2px" v-html="option.value"></div>
              </div>
            </block>
          </div>

          <div class="flex justify-between m-30px">
            <div class=""><el-button type="warning" @click="prevTopic">上一题</el-button></div>
            <div class=""><el-button type="warning" @click="nextTopic">下一题</el-button></div>
          </div>
          <el-divider />
          <div class="flex justify-between text-dark-300">
            <div class="flex linkText" v-if="type == 1 || hasDone" @click="goTeaching">
              <div class="text-red-500 self-center flex inline mr-5px"><el-icon :size="20"><Search /></el-icon></div>
              <div class="self-center">查教材</div>
            </div>
            <div class="flex linkText" @click="doFeedback(1)">
              <div class="text-red-500 self-center flex inline mr-5px"><el-icon :size="20"><Edit /></el-icon></div>
              <div class="self-center">笔记</div>
            </div>
            <div class="flex linkText" @click="doFeedback(2)">
              <div class="text-red-500 self-center flex inline mr-5px"><el-icon :size="20"><ChatDotSquare /></el-icon></div>
              <div class="self-center">反馈</div>
            </div>
            <div class="flex linkText" @click="setTopicCollect(1)" v-if="!inFavorite">
              <div class="text-red-500 self-center flex inline mr-5px"><el-icon :size="20"><Star /></el-icon></div>
              <div class="self-center">收藏</div>
            </div>
            <div class="flex linkText" @click="setTopicCollect(2)" v-else>
              <div class="text-red-500 self-center flex inline mr-5px"><el-icon :size="20"><StarFilled /></el-icon></div>
              <div class="self-center">已收藏</div>
            </div>
            <div class="flex linkText" @click="showAnalysis" v-if="type == 1 || hasDone">
              <div class="text-red-500 self-center flex inline mr-5px"><el-icon :size="20"><DataAnalysis /></el-icon></div>
              <div class="self-center">解析</div>
            </div>
          </div>
          <el-divider />
          <div class="" v-if="currentTopic.showAnalysis">
              <div class="flex justify-between">
                <div class="flex items-center text-16px text-dark-500">
                  <div>正确答案：</div>
                  <div class="text-18px text-green-500 font-weight-600">{{currentTopic.exam_answer.join("")}}</div>
                </div>
                <div class="flex items-center text-16px text-dark-500">
                  <div>您的答案：</div>
                  <div class="text-18px text-orange-500 font-weight-600" v-if="currentTopic.selectAnswer">{{currentTopic.selectAnswer.join("")}}</div>
                </div>
              </div>
              <div>
                <div class="text-16px text-dark-500 mt-20px mb-10px flex items-center">
                  <div class="text-red-500 self-center flex inline mr-5px"><el-icon :size="20"><DataAnalysis /></el-icon></div>
                  <div class="font-weight-600">参考解析</div>
                </div>
                <div class="text-16px leading-28px text-dark-300" v-html="currentTopic.analysis"></div>
              </div>

              <el-divider content-position="right">笔记列表</el-divider>
              <div class="mt-10px p-10px">
                <block v-for="(item,index) in currentTopic.feedback">
                  <div class="mb-15px">
                    <div class="flex text-14px justify-between">
                      <div class="flex self-center">
                        <div class="mr-5px self-center text-gray-500">
                          <el-image v-if="item.avatar" :src="item.avatar" shape="circle" width="20px" height="20px"></el-image>
                          <el-icon v-else :size="20"><UserFilled /></el-icon>
                        </div>
                        <div class="self-center">{{item.nickname}}</div>
                      </div>
                      <div class="self-center text-gray-500">{{item.feedback_addtime}}</div>
                    </div>
                    <div class="ml-20px bg-gray-100 p-10px mt-8px rounded-8px text-gray-500">{{item.feedback_comment}}</div>
                  </div>
                </block>
              </div>

          </div>
          

        </div>
      </div>
      <div class="w-350px">
        <div class="p-30px border border-red-100 rounded-5px mb-20px" v-if="type == 2 && !hasDone">
          <div class="flex justify-center items-center">
            <div class="flex items-center mr-20px self-center">
              <div class="flex">
                <el-icon :size="20" class="mr-5px"><Clock /></el-icon>
              </div>
              <div class="">剩余时间</div>
            </div>
            <div class="text-red-500 font-weight-600 self-center">
              {{ formattedTime }}
            </div>
          </div>
          <el-divider />
          <div class="flex justify-center items-center mt-20px">
            <div class="mr-20px"><el-button type="primary" @click="router.back()">返回上层</el-button></div>
            <div v-if="!isPause"><el-button type="warning" @click="pause">暂停休息</el-button></div>
            <div v-else><el-button type="success" @click="start">继续考试</el-button></div>
          </div>
        </div>
        <div class="p-20px border border-red-100 rounded-5px">
          <div class="">答题卡：<span class="text-red-500 font-weight-600">{{ currentIndex + 1 }}/{{ topicList.length }}</span></div>
          <el-divider />
          <div class="grid grid-cols-8 gap-2 mt-20px">
            <block class="linkText" @click="goTopic(index)" v-for="(item, index) in topicList" :key="index">
              <div class="w-30px h-30px text-14px text-center border rounded-3px leading-30px" v-if="currentIndex == index" :class="currentIndex === index ? 'bg-red-500 text-white' : ''">{{ index + 1 }}</div>
              <div class="w-30px h-30px text-14px text-center border rounded-3px leading-30px" v-else :class="item.hasAnswered ? 'bg-gray-300 text-white' : ''">{{ index + 1 }}</div>
            </block>
          </div>
          <div class="">
            <el-button type="primary" class="mt-20px w-310px" @click="submitExam">提交答案</el-button>
          </div>
        </div>
      </div>
     </div>
   
  </div>

  <el-dialog v-model="dialogFeedback" :title="feedbackTitle">
    <div class="px-16px bg-white  text-dark-500">
      <div class="flex mb-10px" v-if="showFeedbackType">
        <div class="flex mr-10px" @click="setFeedbackType(1)">
          <div class="mr-5px border-solid border-red-500 rounded-full w-12px linkText h-12px self-center" :class="feedbackType == 1?'bg-red-500':'bg-gray-300'"></div>
          <div class="self-center">意见建议</div>
        </div>
        <div class="flex mr-10px"  @click="setFeedbackType(2)">
          <div class="mr-5px border-solid border-red-500 rounded-full w-12px linkText h-12px self-center" :class="feedbackType == 2?'bg-red-500':'bg-gray-300'"></div>
          <div class="self-center">题目纠错</div>
        </div>
      </div>
      <div class="mt-15px">
        <el-input v-model="feedbackContent" type="textarea" :rows="5" maxlength=150 count placeholder="请输入内容,最多150字"></el-input>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFeedback = false">取消</el-button>
        <el-button type="primary" @click="submitFeedback">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog
    v-model="dialogSubmit"
    title="提交答案"
    width="30%"
    :align-center="true"
    :before-close="handleClose"
  >
    <span>确认提交答案？</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogSubmit = false">继续答题</el-button>
        <el-button type="primary" @click="doSubmit">
          确定提交
        </el-button>
      </span>
    </template>
  </el-dialog>

  <el-dialog v-model="dialogResult" title="答题结果" width="950px" center>
    <div class="p-20px">
      <div class="text-20px font-weight-600 text-dark-500" v-if="props.totalScore > 0">评语：</div>
      <div class="text-center text-20px font-weight-500 text-dark-500" v-if="props.totalScore > 0">{{ examComment.ct_content }}</div>
      <div class="grid grid-cols-3 gap-5 mt-20px">
        <div class="border p-20px rounded-5px border-red-100 text-dark-500">
          <div class="text-16px text-gray-500">试卷得分</div>
          <div class="text-35px text-center py-50px font-weight-600 text-red-500">{{ result.total }}<span class="text-16px ml-10px">分</span></div>
          <div class="text-16px text-gray-500" v-if="props.totalScore > 0">总分：{{ props.totalScore }}分</div>
        </div>
        <div class="border p-20px rounded-5px border-red-100 text-dark-500">
          <div class="text-16px text-gray-500">作答时间</div>
          <div class="text-35px text-center py-50px font-weight-600 text-green-500">{{ lastTime.hours }}:{{ lastTime.minutes }}:{{ lastTime.seconds }}</div>
          <div class="text-16px text-gray-500" v-if="props.totalTime > 0">总时长：{{ props.totalTime }}分钟</div>
        </div>
        <div class="border p-20px rounded-5px border-red-100 text-dark-500">
          <div class="text-16px text-gray-500">您答对</div>
          <div class="text-35px text-center py-50px font-weight-600 text-green-500">{{ result.singleCorrect + result.multiCorrect }}<span class="text-16px ml-10px">道</span></div>
          <div class="text-16px text-gray-500">总题数：{{ topicList.length }}道</div>
        </div>
      </div>
      <div class="grid grid-cols-16 gap-3 mt-20px">
        <block class="linkText" v-for="(item, index) in topicList" :key="index">
          <div class="w-42px h-40px text-20px text-center border rounded-3px leading-40px bg-gray-300 text-white" v-if="!item.hasAnswered" >{{ index + 1 }}</div>
          <div v-else>
            <div class="w-42px h-40px text-20px text-center border rounded-3px leading-40px bg-red-300 text-white" v-if="item.judgeResult == 0">{{ index + 1 }}</div>
            <div class="w-42px h-40px text-20px text-center border rounded-3px leading-40px bg-green-300 text-white" v-if="item.judgeResult == 1">{{ index + 1 }}</div>
            <div class="w-42px h-40px text-20px text-center border rounded-3px leading-40px bg-orange-300 text-white" v-if="item.judgeResult == 2">{{ index + 1 }}</div>
          </div>
          
        </block>
      </div>
      <div class="flex justify-center my-30px">
        <div class="flex items-center mx-30px">
          <div class="flex mr-5px"><div class="h-15px w-15px rounded-full bg-gray-300"></div></div>
          <div class="">未选题</div>
        </div>
        <div class="flex items-center mx-30px">
          <div class="flex mr-5px"><div class="h-15px w-15px rounded-full bg-red-300"></div></div>
          <div class="">答错题</div>
        </div>
        <div class="flex items-center mx-30px">
          <div class="flex mr-5px"><div class="h-15px w-15px rounded-full bg-green-300"></div></div>
          <div class="">答对题</div>
        </div>
        <div class="flex items-center mx-30px">
          <div class="flex mr-5px"><div class="h-15px w-15px rounded-full bg-orange-300"></div></div>
          <div class="">少选题</div>
        </div>
      </div>
      <div class="mb-30px flex justify-center">
        <el-button type="warning" class="w-250px mx-30px" @click="dialogResult = false">查看答案</el-button>
        <el-button type="primary" class="w-250px mx-30px" @click="redo()">重做试卷</el-button>
      </div>
    </div>
    
  </el-dialog>

</template>

<script setup>
import { httpApi } from '../api/api'
import { computed, reactive, ref, onMounted,watchEffect, watch,onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { configStore } from '../stores/config'
import { secondsToHoursMinutes } from '../utils/tool'


const props = defineProps({
  topics: {
    type: Array,
    required: true,
    validator: value=>value.every(topic => topic.hasOwnProperty('exam_title'))
  },
  type: {
    type: Number,
    required: true,
    validator: value => [1, 2].includes(value)
  },
  totalScore: {
    type: Number,
  },
  totalTime: {
    type: String,
  }
})

const emit = defineEmits(['submit'])

// 组件状态
const currentIndex = ref(0)
const submitted = ref(false)
const currentTopic = ref({})
const isCompleted = ref(false)
const dialogFeedback = ref(false)
const inFavorite = ref(false)
const showFeedbackType = ref(false)
const dialogSubmit = ref(false)
const dialogResult = ref(false)
const feedbackTitle = ref("")
const feedbackType = ref(1)
const feedbackContent = ref("")
const duration = ref(0);
const lastTime = ref([])
let intervalId;
const result =ref({})
const router = useRouter()
const config = configStore()
const examComment = ref({})
const hasDone = ref(false) //判断是否已交卷

const totalTime = 7200 // 总秒数
const remainingTime = ref(totalTime)
const timerId = ref(null)
const isRunning = ref(false)
const isPause = ref(false)

// 格式化时间显示
const formattedTime = computed(() => {
  const hours = Math.floor(remainingTime.value / 3600)
  const minutes = Math.floor((remainingTime.value % 3600) / 60)
  const seconds = remainingTime.value % 60
  return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`
})
const start = () => {
  if (!timerId.value && remainingTime.value > 0) {
    isRunning.value = true
    isPause.value = false
    timerId.value = setInterval(() => {
      remainingTime.value--
      if (remainingTime.value <= 0) {
        clearInterval(timerId.value)
        timerId.value = null
        isRunning.value = false
      }
    }, 1000)
  }
}

const pause = () => {
  clearInterval(timerId.value)
  timerId.value = null
  isPause.value = true
  isRunning.value = false
}

const favorite = ref([])

let topicList = ref([])

watch(currentTopic,(newValue)=>{
  judgeCollect()
})

watch(remainingTime,(newValue)=>{
  if(newValue <= 0){
    doSubmit()
    pause()
  }
})


watchEffect(() => {
  // `foo` 由编译器转换为 `props.foo`
  if(props.topics.length > 0 ){
    isCompleted.value = true
  }
  currentTopic.value = props.topics[currentIndex.value]
  topicList = props.topics
  
  //console.log(props.topics[currentIndex.value])
})

/*交卷*/
const doSubmit=async()=>{
    if(hasDone.value){  //已经交过卷就直接查看答题卡
      dialogSubmit.value = true
      return
    }
  
    clearInterval(intervalId); // 清除定时器
    lastTime.value = secondsToHoursMinutes(duration.value)
    //console.log(lastTime.value);
    /*判断是否已经做过题目*/
    let haveDoNum = 0
    result.value.singleAll = 0 //单选总量
    result.value.singleCorrect = 0 //单选正确的量
    result.value.singleWrong = 0 //单选错误的量
    result.value.multiAll = 0 //多选总量
    result.value.multiCorrect = 0 //多选正确的量
    result.value.multiWrong = 0 //多选错误的量
    result.value.total = 0 //总分
    let userTopic = []; //用户已做的题目
    topicList.map(item=>{
      //console.log(item)
      if(item.hasOwnProperty('hasAnswered') && item.hasAnswered){
        haveDoNum ++
        if(item.exam_type == 1){ //单选
          result.value.singleAll ++
          if(item.correct){
            result.value.total += 1 //单选题加1分
            result.value.singleCorrect ++ 
          }else{
            result.value.singleWrong ++
          }
        }
        if(item.exam_type == 2){ //多选
          result.value.multiAll ++
          if(item.correct){
            result.value.total += 2 //多选题加2分
            result.value.multiCorrect ++ 
          }else{
            result.value.multiWrong ++
          }
        }
         let examType = 0; //区分每周测评还是其他
        // if(this.source){
        //   examType = 1
        // }
        let temp = {
          topic_id:item.exam_id ,//题目编号
          book_id:item.book_id,
          type:examType ,//区分每周测评还是其他
          correct:item.correct //正确与否
        }
        userTopic.push(temp)
        
      }
    })
    
    result.value.totalScore = parseInt(result.singleAll + result.multiAll * 2) //多选2分 
    if(!result.value.totalScore){
      result.value.totalScore = 0
    }

    result.value.percent = Math.round(((result.value.singleCorrect + result.value.multiCorrect) / (result.value.singleAll + result.value.multiAll))*100) + "%"
    //console.log("题目列表",topicList)
    if(!haveDoNum){
      ElMessage.error("请至少做一题")
      return
    }
    
    //计算单选题目数量及做对情况
    //console.log(userTopic)
    let res = await httpApi.setUserTopic({data:userTopic})
    
    //计算单选题目数量及做对情况
    //console.log(result.value)
    topicList.map(item=>{
      item.showAnalysis = true
    })
    
    let params = {
      score:result.value.totalScore,
    }
    let resComment = await httpApi.getExamComment(params)
    if(resComment.code){
      examComment.value = resComment.data
    }
    
    dialogResult.value = true
    dialogSubmit.value = false
    hasDone.value = true
    
  }

const redo =()=>{
  dialogResult.value = false
  hasDone.value = false
  currentIndex.value = 0
  
  topicList.map(item=>{
    item.hasAnswered = false
    item.showAnalysis = false
    item.correct = false
    item.selectAnswer = []
    item.exam_option.map(option=>{
      option.isSelected = false
    })
  })
  //console.log(topicList)
  currentTopic.value = topicList[currentIndex.value]
  
}

const submitExam=()=>{
  dialogSubmit.value = true
}

const goTeaching=()=>{
  config.setCurrentOpen({section_id:currentTopic.value.section_id})
  router.push({path:"/book/book/1"})
}
/*反馈*/
const doFeedback=(value)=>{
  //console.log(value)
  if(value == 1){
    showFeedbackType.value = false
    feedbackTitle.value = "添加笔记"
    feedbackType.value = 1
  }else{
    showFeedbackType.value = true
    feedbackTitle.value = "选择反馈类型"
  }
  dialogFeedback.value=true
}
const setFeedbackType=(value)=>{
  feedbackType.value = value
}
const submitFeedback=async()=>{
  let params = {
    "feedback_topic_id":currentTopic.value.exam_id,
    "feedback_type":feedbackType.value,
    "feedback_comment":feedbackContent.value
  }
  let res = await httpApi.submitFeedback(params)
  if(res.code){
    ElMessage.success(res.msg)
    getTopicFeedback()
    dialogFeedback.value=false
    
  }
}

const showAnalysis=()=>{
  currentTopic.value.showAnalysis = true
  getTopicFeedback()
  
}
const getTopicFeedback=async()=>{
				let params = {
					topic_id:currentTopic.value.exam_id
				}
				let res = await httpApi.getTopicFeedback(params)
				//console.log(res)
				if(res.code){
					topicList[currentIndex.value].feedback = res.data
				}
			}
/*设置收藏*/
const setTopicCollect=async(type)=>{
				//console.log(this.favorite)
				if(type == 1){ //1为添加
					favorite.value.push(currentTopic.value.exam_id)
				}else{ //否则为删除
					favorite.value = removeElement(favorite.value,currentTopic.value.exam_id)
				}
				//console.log(this.favorite)
				let params={
					type:type,
					user_favorite:JSON.stringify(favorite.value)
				}
				let res = await httpApi.setTopicCollect(params)
				if(res.code){
					ElMessage.success(res.msg)
          judgeCollect()
					getFavorite()
				}
			}
  //删除数组某个元素
const removeElement=(arr, item)=>{
      const index = arr.indexOf(item);
      if (index > -1) {
      arr.splice(index, 1);
      }
      return arr;
    }
const getFavorite=async()=>{
    let resFavorite = await httpApi.getTopicCollect()
    if(resFavorite.code){
      favorite.value = resFavorite.data  //赋值收藏列表
    }
  }
//判断题目类型
const judgeCollect=()=>{
				
				///判断一下是否已收藏
				if(favorite.value.indexOf(currentTopic.value.exam_id) != -1){
					//console.log("aaa")
					inFavorite.value = true
				}else{
					//console.log("bbb")
					inFavorite.value = false
				}
				
			}
// 点击解析之后，选项显示不同背景
const judgeSelect = (item) => {
  //console.log(currentTopic.value.answer);
  if (currentTopic.value.exam_type == 2) {
    // 多选 - 刷题模式/模拟考试
    return currentTopic.value.exam_answer[0].includes(item.lable) ? 'bg-green-300' : 'bg-red-300'
  } else {
    // 单选 - 刷题模式/模拟考试
    return currentTopic.value.exam_answer && currentTopic.value.exam_answer[0] === item.lable ? 'bg-green-300' : 'bg-red-300'
  }
}

const prevTopic = () => {
  if (currentIndex.value > 0) {
    currentIndex.value--
  }else{
    ElMessage.error('已经是第一题了')
  }
}

const nextTopic = () => {
  //console.log(currentIndex.value)
  if (currentIndex.value < props.topics.length - 1) {
    currentIndex.value++
  }else{
    ElMessage.error('已经是最后一题了')
  }
}

const goTopic = (index)=>{
  currentIndex.value = index
}

const selectOption = (index) => {
  if(currentTopic.value.showAnalysis == true){
    ElMessage.error("抱歉，此题目已显示答案解析，不能再选择！")
    return
  }
  if(currentTopic.value.exam_type == 1){
    
    currentTopic.value.exam_option.forEach((item, i) => {
      if(i != index){
        item.isSelected = false
      }
    })
  }

  if(!currentTopic.value.exam_option[index].isSelected){
    currentTopic.value.exam_option[index].isSelected = true
  }else{
    currentTopic.value.exam_option[index].isSelected = false
  }
  topicList[currentIndex.value].exam_option = currentTopic.value.exam_option
  
  let selectAnswer = []
  currentTopic.value.exam_option.forEach((item)=>{
    if(item.isSelected){
      selectAnswer.push(item.lable)
    }
  })
  if(selectAnswer.length > 0){
    topicList[currentIndex.value].hasAnswered = true
  }else{
    topicList[currentIndex.value].hasAnswered = false
  }
  // console.log(topicList.value)
  let judgeReslut = judge(currentTopic.value.exam_answer,selectAnswer)
  if(judgeReslut == 1){
    topicList[currentIndex.value].correct = true
  }else{
    topicList[currentIndex.value].correct = false
  }
  topicList[currentIndex.value].selectAnswer = selectAnswer
  topicList[currentIndex.value].judgeResult = judgeReslut
  //console.log(topicList)

}

const judge = (arr1,arr2)=>{ //传值正确的答案与当前选择的答案，arr2是选择的答案，arr1是题目正确的答案
  //console.log(arr2)
  arr1 = arr1[0].split('') //主要为多选题答案格式分解
  //console.log(arr2)
  if (!Array.isArray(arr1)) {
    arr1 = [arr1]
  }
  if (!Array.isArray(arr2)) {
    arr2 = [arr2]
  }
  let result = arr2.every((value) => arr1.includes(value))
  //console.log("多选判断结果",result)
  if(result){
    if (arr1.length !== arr2.length){
      return 2  //2表示部分正确
    }else{
      return 1 //1表示正确
    } 
  }else{
    return 0 //0表示错误
  }
  
  return 
}

const handleSubmit = () => {
  
  
  submitted.value = true
  emit('submit', processedResults.value)
}
onBeforeUnmount(() => {
  clearInterval(timerId.value)
})
onMounted(()=>{
  getFavorite() //获取收藏的题目
  start() //开始计时
  intervalId = setInterval(() => {
    duration.value ++ ; // 实时更新停留时间
  }, 1000); // 每秒更新一次
})

</script>

<style scoped>
  .linkText{ cursor: pointer;}
</style>